﻿<h2>My Heroes</h2>
<div>
    <label>Hero name:</label><input #heroName />
    <button (click)="add(heroName.value); heroName.value=''">Add</button>
</div>
<ul class="heroes">
    <li *ngFor="let hero of heroes" (click)="onSelect(hero)"
        [class.selected]="hero==selectedHero">
        <span class="badge">{{hero.id}}</span>
        <span>{{hero.name}}</span>
        <button class="delete" (click)="delete(hero);$event.stopPropagation()">x</button>
    </li>
</ul>
<!--代码迁移到了hero-detail.component.ts
    <div *ngIf="selectedHero">
    //内建指令*ngIf
        <h2>{{selectedHero.name}} details!</h2>
        <div><label>id: </label>{{selectedHero.id}}</div>
        <div>
            <label>name: </label>
            <input [(ngModel)]="selectedHero.name" placeholder="name">
        //内建指令ngModel
        </div>
    </div>
-->
<!-- <my-hero-detail [hero]="selectedHero"></my-hero-detail>-->
<div *ngIf="selectedHero">
    <h2>
        {{selectedHero.name|uppercase}}
    </h2>
    <button (click)="gotoDetail()">View Details</button>
</div>
